Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: improve animating colors #2471

Merged
merged 5 commits into from
Oct 4, 2024
Merged

feat: improve animating colors #2471

merged 5 commits into from
Oct 4, 2024

Conversation

jakex7
Copy link
Member

@jakex7 jakex7 commented Oct 2, 2024

Summary

Currently on Fabric, you cannot animate color properties like fill or stroke using Animated with useNativeDriver: true or Reanimated. That's because we have custom structure that needs to be parsed on JS and looks like:

type ColorStruct = Readonly<{
  type?: WithDefault<Int32, -1>;
  payload?: ColorValue;
  brushRef?: string;
}>;

However, special values like currentColor / context-fill / context-stroke / /^url\(#(.+)\)$/ can not be animated anyway. Instead, we should allow passing ColorValue directly and detect on the native side if its ColorValue or ColorStruct.

Test Plan

Example app -> TestX

Compatibility

OS Implemented
iOS ✅
MacOS ✅
Android ✅

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in README.md

@jakex7 jakex7 mentioned this pull request Oct 3, 2024
Merged
github-merge-queue bot pushed a commit to software-mansion/react-native-reanimated that referenced this pull request Oct 3, 2024
@jakex7
Add SVG color properties to list of color attributes to parse (#6567)
e20b87c 
## Summary

This PR will significantly enhance the developer experience when
animating SVGs, as with these changes, the `SVGAdapter` is no longer
required (at least for animating **colors**). It's related to the
following PR:
software-mansion/react-native-svg#2471

## Test plan

At this point, the changes will not impact the current behavior and need
to be tested within the `react-native-svg` repository until the release.
Once the RNSVG release is out, I will add an example to the Reanimated
repository.
@jakex7 jakex7 merged commit 690cddd into main Oct 4, 2024
11 of 12 checks passed
@jakex7 jakex7 deleted the @jakex7/improveColorAnimating branch October 4, 2024 12:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@jakex7